import React, { Component } from 'react'
import { NavBar } from 'antd-mobile';
import SearchInput from '../searchInput/SearchInput'
import './category.css'
import myaxios from '../../utils/myaxios'
import Index from '../index/Index';

export default class Category extends Component {
    state = {
        categories:[], //返回菜单数据
        categories_content:[],  //返回右边菜单内容
        select_index:0  //判断当前选中项
    }
    handelSelectClick = (e) => {
        let select_index = e.target.getAttribute("data-index")
        this.setState({
            select_index:select_index,
            categories_content:this.state.categories[select_index].children
        })
    }
    
    componentDidMount(){
        myaxios.get("categories").then(res=>{
            // console.log(res)
            this.setState({
                categories:res,
                categories_content:res[0].children
            })
        })
    }
    render() {
        return (
            <div className="yg-category">
                {/* 头部开始 */}
                <div className="category-nav">
                    <NavBar className="category-nav-title">优购商城</NavBar>
                </div>
                {/* 头部结束 */}
                {/* 搜索框开始 */}
                <div className="category-seach">
                    <SearchInput></SearchInput>
                </div>
                {/* 搜索框结束 */}
                {/* 分类菜单开始 */}
                <div className="category-content">
                    <div className="category-content-left" onClick={this.handelSelectClick}>
                        {
                            this.state.categories.map((v,i)=>{
                                 return <div data-index={i} className={this.state.select_index == i?"category-left-item active":"category-left-item"} key={v.cat_id}>
                                    {v.cat_name}
                                </div>
                            })
                        }
                    </div>
                    <div className="category-content-right">
                        {
                            this.state.categories_content.map((v,i)=>{
                                return <div className="content-right-item" key={v.cat_id}>
                                    {/* 二级菜单标题开始 */}
                                    <div className="right-item-title">
                                        {"/"}{v.cat_name}{"/"}
                                    </div>
                                    {/* 二级菜单标题结束 */}
                                    {/* 产品列表开始 */}
                                    <div className="product-list">
                                        {
                                            v.children.map(vv=>{
                                                return <div className="product-list-item" key={vv.cat_id}>
                                                    <div className="imagerWrapper">
                                                        <img src={vv.cat_icon} alt=""/>
                                                    </div>
                                                    <div>
                                                        {vv.cat_name}
                                                    </div>
                                                    
                                                </div>
                                            })
                                        }
                                    </div>
                                    {/* 产品列表结束 */}
                                </div>
                            })
                        }
                    </div>
                </div>
                {/* 分类菜单结束 */}
            </div>
        )
    }
}
